import React, { Component,createRef } from 'react'
import {DetailWrap} from './detail.js'
import Header from '../Home/Header'
import {get} from '../../utils/http'
import moment from 'moment';
import {Icon} from "antd-mobile"
import { Carousel,Drawer, Button,DatePicker,InputNumber,message } from 'antd';
export default class Detail extends Component {
  constructor(){
      super()
      this.ref=createRef()
      this.state={
          imglist:[],
          data:[],
          commontlist:[],
          visible: false,
          price:''
      }
  }
   async componentDidMount(){
     console.log(this.props.location.state.data.data);
       // this.state.data.push(this.props.location.state.data.data)
        this.setState({
            imglist:this.props.location.state.data.data.images,           
        })
        let proid=this.props.location.state.data.data.productId
        let jurid=this.props.location.state.data.data.urlJourneyId
        console.log(this.props.location.state.data.data.productId);
        let result=await get(`https://m.tuniu.com/wap-detail/api/self/detail/getPriceInfo?d={"productId":${proid},"bookCityCode":"200","departCityCode":"200","backCityCode":"200","journeyId":${jurid}}&_=1576131479963`)
              //   console.log(result);
                 var obj = Object.assign(this.props.location.state.data.data, result.data.data);
                 this.state.data.push(obj)
        
        //console.log(obj);
        let commontresult=await get(`https://m.tuniu.com/mapi/tour/comment?productId=${proid}&page=1&selectedType=0&_=1576136846738087604387093398820`)
       // console.log(commontresult.data.data);
        this.state.commontlist.push(commontresult.data.data)
        this.setState({})
    }
    handleclick=async ()=>{      
        let proid=this.props.location.state.data.data.productId 
        
        let result=await get(`https://m.tuniu.com/mapi/tour/comment?productId=${proid}&page=1&selectedType=0&_=1576136846738087604387093398820`)
     //   console.log(result.data.data);      
        this.props.history.push({pathname: '/commont', state: { data:result.data.data}})
    }
    showDrawer = () => {
        this.setState({
          visible: true,
        });
      }
    
      onClose = () => {
        this.setState({
          visible: false,
        });
      }
      timeChange=(value)=>{
console.log(value);
      }
      numChange=(value)=>{
          this.setState({
             price:~~this.ref.current.innerText*~~value
          })
                
 
      }

      disabledDate=(current)=>{
        return current && current < moment().endOf('day');
      }
      info=()=>{
        message.info('加入购物车成功');
      }
    render() {
        return (
            <DetailWrap>
                <div className="container">
                <Header></Header>
                <div className="swiper">
                <Carousel autoplay>
                    {
                        this.state.imglist.map((value,index)=>{
                            return (
                          <div>
                     <img src={value.simage} alt=""/>
                         </div>
                            )
                        })
                    }
               </Carousel>
             </div>
             {
               this.state.data.map((value,key)=>{
                      return (
                          <div className="msg">
                          <div className="title">
                           {value.name}
                          </div>
                      <div className="price">途牛价￥<span>{value.lowestPrice}</span>起 <i>价格说明</i></div>
                          <div className="hotel"><img src={value.recommendLabelImage} alt=""/>
                          <span>{value.characteristic}</span>
                          </div>
                          <div className="actity">
                              <div className="cheap">
                                  <i>优惠信息</i>
                                  {
                                   value.promotionNameList.map((value1,index1)=>{
                                       return (
                                          <span>{value1}</span> 
                                       )                                      
                                   })   
                                  }                    
                               </div>
                               <div className="acount">
                                   <a href={value.couponUrl}>
                                  <i>领劵活动</i>
                                  <div>
                                  {
                                   value.couponList.map((value1,index1)=>{
                                       return (
                                          <span>{value1.activityTitle}</span> 
                                       )                                      
                                   })   
                                  }
                                   </div>
                                <em> <Icon type="right" style={{ fontSize: '25px', color: '#666' }} /></em> 
                                  </a>
                               </div>  
                          </div>                        
                          <div className="special">
                              <span></span>
                         <a href={value.recommendH5Url}>产品特色</a>
                          </div>
                          </div>
                      )
               })                                 
             }
              <div className="commont">
                  {
                      this.state.commontlist.map((value,index)=>{
                         return (
                              <>
                      <h3 onClick={this.handleclick}><span><em>游客点评</em> (<span><span className="pent">{value.summary.satisfaction}%</span> <i>满意度</i> </span>) 
                      </span> <span className="people">共{value.count}人点评 <em className="icon2"> <Icon type="right" style={{ fontSize: '25px', color: '#666' }} /></em> </span>
                          
                      </h3>
                  <div>
                      <ul>
                          {
                              value.specSatisfactionList.map((value,index)=>{
                                  return (
                                  <li>{value.specName}<span>{value.satisfaction}%满意</span></li>
                                  )
                              })
                          }
                      </ul>
                  </div>
                              </>
                         ) 
                      })
                  }                
              </div>
              </div>
              <div className="footer">
              <Button type="danger" onClick={this.showDrawer}>
              购物车
         </Button>
         <Drawer
          title="途牛旅游网"
          placement="right"
          closable={false}
          onClose={this.onClose}
          visible={this.state.visible}
          placement={"bottom"}
        >  
           {
               this.state.data.map((value,index)=>{
                   return(
                 <p className="carprice">途牛价￥<span ref={this.ref}>{value.lowestPrice}</span></p>
                   )
               })
           }      
            <br/>
             <span>选择团期:</span>&nbsp;
             <DatePicker onChange={this.timeChange}  
              autoFocus={true}
             disabledDate={this.disabledDate}
             />
             <br/>
             <br/>
             <span>数量：</span>&nbsp;
             <InputNumber min={1} max={10} defaultValue={1} onChange={this.numChange} />
             <br/>
             <br/>
        <p> <span>￥{this.state.price}</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span><Button type="primary" onClick={this.info}>
                加入购物车
         </Button></span>            
            </p>
      
        </Drawer>
              </div>
            </DetailWrap>
        )
    }
}
